import React, { Component,Fragment } from 'react'
import { List, Avatar, Button, Card,Badge } from 'antd';
import {connect} from 'react-redux'
import {
  setAllRead,
  delMsg,
  setMsgState
} from '../../store/message/actionCreators'

class Message extends Component {
  render() {
    return (
      <Fragment>
       <div style = {{textAlign:'left'}}>
        <Card 
          title="消息"
          extra = {
            <Button 
              onClick = {this.allRead}
            >全选已读</Button>
          }
          >
            <List
              itemLayout="horizontal"
              dataSource={this.props.msgList}
              renderItem={(item,index) => (
                <List.Item actions={[
                  <Button
                    size='small'
                    disabled = {item.hasRead}
                    onClick = {()=>{this.setMsgState(index)}}
                  >点击已读</Button>,
                  <Button
                    size='small'
                    danger
                    onClick = {
                      ()=> {this.delMsg(index)}
                    }
                  >删除</Button>
                ]}>
                  <List.Item.Meta
                    avatar={
                      <Badge dot ={!item.hasRead}>  
                        <Avatar src={item.avatar}/>
                      </Badge>}
                    title={<span>{item.title}</span>}
                    description={item.desc}
                  />
                </List.Item>
              )}
            />
          </Card>
       </div>
        
      </Fragment>
    )
  }
  allRead = () => {
    this.props.setAllRead()
  }
  setMsgState = (index) => {
    this.props.setMsgState(index)
  }
  delMsg = (index) => {
    this.props.delMsg(index)
  }
}

const mapStateToProps = (state) => {
  return {
    msgList: state.msg.msgList
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setAllRead: () => {
      dispatch(setAllRead())
    },
    setMsgState: (index) => {
      dispatch(setMsgState(index))
    },
    delMsg: (index) => {
      dispatch(delMsg(index))
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Message)